<#-- @ftlvariable name="page" type="org.springframework.data.domain.Page<com.fable.sp.core.domain.Container>" -->
<@ui.html>
<div class="container-fluid" style="margin-top: 20px;">
    <form class="form-horizontal validationEngine">
        <div class="form-group">
            <label class="col-xs-2 control-label">关键字</label>
            <div class="col-xs-3">
                <input type="text" name="name" value="${RequestParameters.name}" class="form-control">
            </div>
            <label class="col-xs-2 control-label">开始日期</label>
            <div class="col-xs-3">
                <input name="beginAt" value="${RequestParameters.beginAt}"
                       class="form-control laydate-date" format="YYYY-MM-DD" id="beginDate">
            </div>
            <div class="col-xs-2">
                <button type="submit" class="btn btn-primary">搜索</button>
            </div>
        </div>
    </form>
    <hr>
    <table class="table table-bordered table-striped">
        <tr>
            <th>标题</th>
            <th>描述</th>
            <th>创建时间</th>
            <th width="100px">操作</th>
        </tr>
        <#list page.content as container>
            <tr data-container-id="${container.id}">
                <td>${container.name}</td>
                <td>${container.info}</td>
                <td>${container.createdDate.toDate()?string("yyyy-MM-dd HH:ss")}</td>
                <td>
                    <button type="button" class="btn btn-default layout-list">
                        <span class="glyphicon glyphicon-chevron-down glyphicon-align-right" aria-hidden="true"></span>控制列表
                    </button>
                </td>
            </tr>
            <tr style="display: none">
                <td colspan="4" class="layout-container">
                </td>
            </tr>
        <#else >
            <tr>
                <td colspan="4" class="text-center">暂无可用控制列表</td>
            </tr>
        </#list>
    </table>
    <div class="row text-right">
        <@ui.pagination value=page/>
    </div>
    <script>
        $(function () {
            $(".layout-list").click(function () {
                var _tr = $(this).closest("tr");
                var _nextTr = _tr.next("tr");
                var _icon = $(this).find(".glyphicon");
                var isHidden = _icon.hasClass("glyphicon-chevron-down");
                if (isHidden) {
                    _icon.removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
                    var containerId = _tr.attr("data-container-id");
                    _nextTr.find(".layout-container").load("<@spring.url relativeUrl='/sp/layouts'/>?r="+Math.random()+"&containerId=" + containerId + "&original=false&select=true").end().show('slow');
                } else {
                    _icon.removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
                    _nextTr.hide('slow');
                }
            });
            $(".select-layout").live("click", function () {
                var layoutId = $(this).attr("data-id");
                var opener = window.opener || parent;
                if (opener && opener.onLayoutSelect) {
                    opener.onLayoutSelect({
                        layoutId: layoutId,
                        url: "${@('/sp/renderLayout')}?layoutId=" + layoutId
                    });
                }
            });
        });
    </script>
</@ui.html>
</div>